<template>
	<div>
		<div class="publickHead">
			<div class="headTop">
				<div class="wrap text-right">
					<a href="#">注册</a><span>|</span><a href="#">登录</a>
				</div>
			</div>
			<div class="wrap flex align-center">
				<div class="headLogo">
					<div class="logo"> <el-image :src="logo" fit="contain"></el-image></div>
				</div>
				<div class="searchBox">
					<div class="flex align-center">
						<div>
							<el-input v-model="keyWord" placeholder="请输入内容"></el-input>
						</div>
						<div v-if="keyWord===''"><i class="el-icon-search base-font-17" @click="sarchHandle"></i></div>
						<div v-else><nuxt-link exact-active-class="active-link"
								:to="{path:'/search',query: { keyword :keyWord }}"><i
									class="el-icon-search base-font-17"></i></nuxt-link></div>
					</div>
				</div>
				<div>
					<el-popover placement="right-start" title="扫一扫关注微信" width="160" trigger="hover">
						<div class="gzwxImg big"><el-image :src="headEwm" fit="contain"></el-image></div>
						<div class="gzwxImg" slot="reference"><el-image :src="headEwm" fit="contain"></el-image></div>
					</el-popover>

				</div>

			</div>
			<div class="navBoxStat"  @mouseleave="menuNavLeave">
				
				<div class="wrap flex align-center justify-between base-font-16 text-white" style="">
					<div class="cunstNavItem" @mouseover="menuNavHover(index)" :class="menuIndex===index?'checked':''" v-for="(item,index) in menuList" :key="index">
					<!-- {{item.name}} -->
					<nuxt-link exact-active-class="active-link"
						:to="goLink(index,item)">{{item.name}}</nuxt-link>
						
					</div>
				</div>
				<div class="custSubMenuBox" v-if="subBoxShow">
					<div class="wrap flex align-center justify-between">
						<div class="subMenuCol">
							<div class="base-font-16 text-bold">{{subMenuTitle}}</div>
							<el-row :gutter="20">
							  <el-col :span="6" v-for="(item,index) in subMenuList" :key="index">
								  <div>
									  <div class="base-font-16">
										  <nuxt-link
										  		:to="{path:'/list',query: { name:menuList[menuIndex].name,index:index }}"
										  		@click.native="subBoxShow=false">{{item.name}}</nuxt-link>
									  
									  </div>
									  <div class="ellipsis1" v-for="(iitem,iindex) in item.articleLabelList" :key="iindex">{{item.title}}</div>
								  </div>
							  </el-col>
							 
							</el-row>
						
						</div>
						<div class="subMenuCol">
							<div class="flex align-center justify-end">
								<div class="subMinImg"><el-image :src="subImg" fit="cover"></el-image>
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
			
		</div>
		
		<div class="banner">
			<div class="bottomLable ">
				<div class="wrap flex align-center flex-wrap">
					<div class="lableItem pointer" v-for="(item,index) in bannerBtnList" :key="index" @click="goQfwLink(item.operateParams)">{{item.name}}</div>
				</div>
			</div>
			<el-carousel height="400px">
				<el-carousel-item v-for="(item,index) in bannerList" :key="index">
					<div class="bannerItem" @click="goBannerLink(item.operateParams)"><el-image :src="item.files" fit="cover"></el-image></div>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script>
	import logo from "@/static/image/lx/logo.png"
	import headEwm from "@/static/image/lx/ewm01.jpg"
	import subImg from "@/static/image/banner.jpg"
	import {
		Decrypt
	} from '@/utils/aes';
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				logo,
				headEwm,
				subImg,
				seectValue: '选项1',
				keyWord: "",
				menuList: [],
				menuIndex: 0,
				subBoxShow: false,
				subMenuTitle: '',
				subMenuList: [],
				bannerBtnList:[],
				bannerList: []
			}
		},
		watch: {
			$route: {
				immediate: true,
				handler(to, from) {},
			}
		},
		mounted() {
			this.getMenuList()
		},
		computed: {
			...mapState({
				menuListData: (state) => state.webData.menuListData,
			}),
		},
		methods: {
			...mapActions(["saveMenuListAction"]),
			goLink(index, item) {
				if (index === 0) {
					return {
						path: '/home'
					}
				} else {
					return {
						path: item.url,
						query: {
							name: item.name,
							index: 0
						}
					}
				}
			},
			goQfwLink(url){
				this.$router.push({
					path: url,
				})
			},
			goBannerLink(id){
				this.$router.push({
					path: '/detail',
					query: {
						id: id
					}
				})
			},
			getMenuList() {
				// this.$store.dispatch('settings/changeLayout', this.oldLayout)
				this.menuList = []
				this.$selectIndexData().then((res) => {
					if(res.code === 0){
						console.log(res,'5666666')
						this.bannerBtnList=res.data.bannerBtnList
						this.bannerList=res.data.bannerList
						this.menuList=[{id:0,name:"首页"}]
						res.data.labelList.forEach((item,index)=>{
							if(item.type==='2'){
								item.url='/list'
							}
							this.menuList.push(item)
						})
					}
						this.saveMenuListAction(this.menuList)
						localStorage.setItem('menuList', JSON.stringify(this.menuList))

					// }
				});
			},

			menuNavHover(index) {
				this.menuIndex = index
				let t=this.menuList[index]
				if(index>0){
					this.subMenuTitle =t.name
					this.subBoxShow=true
					this.getSelectLabelAndArticle(t.id)
				}	
			},
			menuNavLeave() {
				this.menuIndex =0
				this.subBoxShow=false
			},
			
			// 二级菜单
			getSelectLabelAndArticle(id){
				this.$selectLabelAndArticle({cateId:id}).then((res) => {
					this.subMenuList =res.data
				})
			},
			
			
			
			menuNavOver() {
				this.menuIndex = -1
			},


			mouseOver(e, index) {
				this.menuIndex = index
				this.subBoxShow = true
			},
			mouseLeave(e, index) {
				this.menuIndex = index
				this.subBoxShow = false
			},
			sarchHandle() {
				this.$message({
					message: '关键字不能为空',
					type: 'warning'
				});
			}


		}
	}
</script>

<style lang="scss">
	
	.cunstNavItem{
		min-width:90px;text-align: center;
		a{display: block;padding:0 20px;cursor:pointer;color:#FFFFFF;}
		&:hover a{font-weight: bold;}
		&.checked a{background: #494eb9;}
	}
	
	.custSubMenuBox{position: absolute;width:100%;height: auto;z-index:9999;padding:30px;background:rgba(255, 255, 255, 0.9);
		.subMenuCol{width:50%;
			&+.subMenuCol{border-left:1px solid #ef9b76;}
			.subMinItem{font-size:15px;margin-right:10px;margin-top:15px}
			.subMinImg{width:250px;height:120px;
				.el-image{width:250px;height:120px;}
			}
		}
		.column-container {
		  -webkit-column-count: 3; /* Chrome, Safari, Opera */
		  -moz-column-count: 3;    /* Firefox */
		  column-count: 3;
		 
		  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
		  -moz-column-gap: 20px;    /* Firefox */
		  column-gap: 20px;
		}
	}
	.banner {
		position: relative;
		width: 100%;

		.bottomLable {
			position: absolute;
			;
			bottom: 0;
			left: 0;
			z-index: 999;
			width: 100%;

			.lableItem {
				background: rgba(255, 255, 255, 0.85);
				color: #b75428;
				font-size: 13px;
				font-weight: bold;
				padding: 3px 10px;
				margin: 5px 10px;
			}

		}

		.bannerItem {
			width: 100%;
			height: 400px;

			.el-image {
				width: 100%;
				height: 400px;
			}
		}

	}

	.el-popover {
		z-index: 9999;
	}

	.publickHead {
		background: #FFFFFF;
		// position: sticky;z-index: 99999;top:0;
	}

	.navBoxStat {
		position: sticky;
		z-index: 999;
		top: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #5A60CE;
	}

	.active-link {
		color: red;
		/* 选中的链接颜色 */
		font-weight: bold;
		/* 加粗显示 */
		background: #494eb9;
	}

	.headTop {
		background: #f9f9f9;
		height: 30px;
		line-height: 30px;

		.wrap {
			a {
				font-size: 13px;
			}

			span {
				font-size: 13px;
				margin: 0 5px;
			}
		}
	}

	.gzwxImg {
		width: 50px;
		height: 50px;
		margin-left: 20px;

		.el-image {
			width: auto;
			height: 60px;
		}

		&.big {
			width: 120px;
			height: 120px;

			.el-image {
				width: auto;
				height: 120px;
			}
		}
	}

	.headLogo {
		width: 100%;
		height: auto;
		padding: 20px 0;

		.logo {
			width: auto;
			height: 58px;

			.el-image {
				width: auto;
				height: 58px;
			}
		}

	}

	.searchBox {
		width: auto;
		height: 40px;
		border-radius: 20px;
		padding-right: 15px;
		border: 1px solid #ddd;
		overflow: hidden;

		.el-input__inner {
			border: none;
		}
	}

	.navBox {
		height: 50px;
		line-height: 50px;
		background: #5A60CE;
		position: relative;

		.subMenuBox {
			position: absolute;
			width: 100%;
			height: auto;
			padding: 30px;
			box-sizing: border-box;
			z-index: 999999;
			background: rgba(236, 244, 255, 0.95);
			top: 50px;
			left: 0;
			box-shadow: 0 5px 15px rgba(73, 78, 185, 0.45);

			.subItem {
				padding-right: 50px;
				font-size: 16px;
				cursor: pointer;
				color: #5A60CE;

				&:hover {
					font-weight: bold;
					color: #5A60CE
				}
			}
		}
	}

	.menuItem {
		color: #FFFFFF;
		font-size: 16px;
		cursor: pointer;

		a {
			color: #FFFFFF;
			height: 50px;
			padding: 0 20px;
			line-height: 50px;
			display: block;
			min-width: 104px;
			text-align: center;

			&:hover {
				font-weight: bold;
			}
		}

		.router-link-exact-active {
			background: #494eb9;
		}

		&.checked {
			background: #494eb9;
		}

	}

	.rightLoginBox {
		width: 200px;
		height: 50px;
		line-height: 50px;
		background: #F4F3EC;
	}

	.subItem {
		font-size: 16px;
	}
</style>